<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <script src="./lib/dist/include-openlayers-local.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        height: 700px;
        width: 100vw;
      }
      .ol-zoomslider {
        margin-top: 40px;
      }
      .ol-viewport {
        margin-bottom: 30px;
      }
      .ol-custom-overviewmap {
        /* position: fixed; */
        right: 0;
        bottom: 10px;
        top: auto;
        left: auto;
      }

      .ol-overviewmap-box {
        border: 1px solid #ff2d51;
      }
    </style>
  </head>
  <body>
    <div id="map">
      <div id="mouse-position"></div>
      <input type="button" value="下载图片" id="save" />
    </div>
    <script>
      const key = 'df6d28eeed7cb6bfe4ff707e90d0f66a'
      const TianDiTu_vec = new ol.layer.Tile({
        title: '天地图矢量图层',
        source: new ol.source.XYZ({
          url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + key,
          wrapX: false
        })
      })
      const TianDiTu_cva = new ol.layer.Tile({
        title: '天地图矢量注记图层',
        source: new ol.source.XYZ({
          url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + key,
          wrapX: false
        })
      })
      /* 天地图影像图层 */
      const TianDiMap_img = new ol.layer.Tile({
        title: '天地图影像图层',
        source: new ol.source.XYZ({
          url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + key,
          wrapX: false
        })
      })
      /* 天地图影像注记图层 */
      const TianDiMap_cia = new ol.layer.Tile({
        title: '天地图影像注记图层',
        source: new ol.source.XYZ({
          url: 'http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + key,
          wrapX: false
        })
      })
      const map = new ol.Map({
        target: 'map',
        layers: [TianDiTu_vec, TianDiTu_cva, TianDiMap_img, TianDiMap_cia],
        view: new ol.View({
          projection: 'EPSG:4326',
          center: [104.5535, 30.3848],
          zoom: 18
        })
      })
      //导航控件
      const ZoomToExtent = new ol.control.ZoomToExtent({
        extent: [102.54, 30.05, 104.53, 31.26]
      })
      map.addControl(ZoomToExtent)
      //放大缩小控件
      const zoomslider = new ol.control.ZoomSlider()
      map.addControl(zoomslider)
      //鼠标显示坐标值
      const mousePositionControl = new ol.control.MousePosition({
        //坐标格式
        coordinateFormat: ol.coordinate.createStringXY(5),
        projection: 'EPSG:3857',
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp'
      })
      map.addControl(mousePositionControl)
      //比例尺控件
      const scaleLineControl = new ol.control.ScaleLine({
        /* 设置比例尺单位,degrees,imperial,us,nautical,metric */
        units: 'metric'
      })
      map.addControl(scaleLineControl)
      //鹰眼
      const overViewMapControl = new ol.control.OverviewMap({
        /* 鹰眼控件样式  */
        className: 'ol-overviewmap ol-custom-overviewmap',
        layers: [TianDiTu_vec, TianDiTu_cva, TianDiMap_img, TianDiMap_cia],
        /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
        collapseLabel: '\u00BB',
        /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
        label: '\u00AB',
        /* 初始为展开显示方式 */
        collapsed: false,
        view: new ol.View({
          projection: 'EPSG:4326',
          minZoom: 8,
          maxZoom: 18
        })
      })
      map.addControl(overViewMapControl)
      console.log(map.getSize())
      document.getElementById('save').addEventListener('click', function () {
        map.once('postcompose', function (event) {
          var canvas = event.context.canvas
          canvas.toBlob(function (blob) {
            saveAs(blob, 'map.png')
          })
        })
        map.renderSync()
      })
      map.on('singleclick',function(){
        alert('地图被点击了')
      })
    </script>
  </body>
</html>
